<template>
  <div>
    <h1 style="font-size: 28px">批量录入网关</h1>
    <div>
      <br/><br/>
      <div style="margin-left: 10%;">
        <a-upload-dragger
          :file-list="fileList"
          :before-upload="beforeUpload"
          :multiple="false"
          style="width: 45%;"
        >
          <p class="ant-upload-drag-icon">
            <inbox-outlined/>
          </p>
          <p class="ant-upload-text"> 点击或拖拽文件 </p>
          <p class="ant-upload-hint"> 支持*.xls及.xlsx格式的文件上传 </p>
        </a-upload-dragger>
      </div>
      <br/><br/>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" style="width: 140px;" @click="onConfirm">确定</a-button>
          <a-button style="width: 140px;margin-left: 20px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, reactive, toRefs} from "vue";
import {batchCreateGateway} from "/@/api/product/gateway";
import {HttpResult} from "/@/api/core/model/coreModel";
import {message} from "ant-design-vue";

export default defineComponent({
  name: 'GatewayEntry',
  props: {
    viewType: {
      type: String,
      default: null,
    }
  },
  setup(props, {emit}) {

    const data = reactive({
      fileList: [] as any,
    });

    const beforeUpload = (file: any) => {
      const fileName = file.name as string;
      if ((-1 == fileName.indexOf('.xls', 0)) || (-1 == fileName.indexOf('.xlsx', 0))) {
        message.error("文件格式错误");
        data.fileList = [];
        return false;
      }
      data.fileList = [file];
      return false;
    };

    const onConfirm = () => {
      if (data.fileList.length > 0) {
        const uploadFile = data.fileList[0] as any;
        batchCreateGateway({
          file: uploadFile
        }).then((result:HttpResult) => {
          if (result.code == 0) {
            message.success("批量录入成功");
            emit("my-emit", 'Confirm');
          } else {
            message.error(result.message);
          }
        });
      }
    };

    const onBack = () => {
      emit("my-emit", 'Cancel');
    }

    return {
      ...toRefs(data),
      beforeUpload,
      onConfirm,
      onBack
    };

  },
});

</script>

<style scoped>

</style>
